<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程页面</title>

    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_1906880_rpx85mbn0g.css"
    />
    <link rel="stylesheet" href="./css/publice.css" />
    <link rel="stylesheet" href="./css/course.min.css" />
  </head>
  <body>
    <div class="main-content">
      <div class="crumbs">
        <a href="/" class="underline"> 首页</a> / <span>视频教程</span>
      </div>

      <div class="cate-item">
        <div class="cell">
          <div class="left-text">分类 :</div>
          <ul class="r-list">
            <li class="underline active">
              <a href="javascript:;"> 全部</a>
            </li>
            <li class="underline">
              <a href="javascript:;"> listItem</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="cate-item mt14">
        <div class="cell line-1">
          <div class="left-text">类型 :</div>
          <ul class="r-list">
            <li class="underline active">
              <a href="javascript:;"> 全部</a>
            </li>
            <li class="underline">
              <a href="javascript:;"> listItem</a>
            </li>
          </ul>
        </div>

        <div class="cell type-wrap-1">
          <div class="left-text">类型 :</div>
          <ul class="r-list">
            <li class="underline">
              <a href="javascript:;"> CAD</a>
            </li>
          </ul>
          <div class="btn showmoreBtn">
            展开 <i class="iconfont icon-xiala2"></i>
          </div>
        </div>
      </div>

      <div class="cate-item mt14">
        <div class="cell">
          <div class="left-text">筛选 :</div>
          <ul class="r-list type-box">
            <li class="underline active">
              <a href="javascript:;"> 最新课程</a>
            </li>
            <li class="underline">
              <a href="javascript:;"> 限时免费课程</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="course-list">
        <a href="javascript:;" class="item click year" title="课程名字">
          <div class="img-wrap">
            <img
              src="http://photo.tuituisoft.com/portal/20210312/604ad05ab335c.jpg"
              alt="课程名字"
            />
            <div class="tips year-tips">年会员</div>
            <div class="tips free-tips">免费</div>
            <div class="tips camp-tips">
              <i class="icon-qizi-brown iconfont"></i> 训练营
            </div>
            <div class="b-text">
              <span>完结</span>
              <span>共14课时f</span>
            </div>
          </div>
          <div class="c-name text-row-1">
            react 课程名字 react 课程名字react 课程名字react 课程名字
          </div>
          <div class="b-bar">
            <span>react</span>
            <span>共 <b>1988</b>人学习 </span>
          </div>
        </a>
        <a href="javascript:;" class="item click free" title="课程名字">
          <div class="img-wrap">
            <img
              src="http://photo.tuituisoft.com/portal/20210312/604ad05ab335c.jpg"
              alt="课程名字"
            />
            <div class="tips year-tips">年会员</div>
            <div class="tips free-tips">免费</div>
            <div class="tips camp-tips">
              <i class="icon-qizi-brown iconfont"></i> 训练营
            </div>
            <div class="b-text">
              <span>完结</span>
              <span>共14课时f</span>
            </div>
          </div>
          <div class="c-name text-row-1">
            react 课程名字 react 课程名字react 课程名字react 课程名字
          </div>
          <div class="b-bar">
            <span>react</span>
            <span>共 <b>1988</b>人学习 </span>
          </div>
        </a>
        <a href="javascript:;" class="item click camp" title="课程名字">
          <div class="img-wrap">
            <img
              src="http://photo.tuituisoft.com/portal/20210312/604ad05ab335c.jpg"
              alt="课程名字"
            />
            <div class="tips year-tips">年会员</div>
            <div class="tips free-tips">免费</div>
            <div class="tips camp-tips">
              <i class="icon-qizi-brown iconfont"></i> 训练营
            </div>
            <div class="b-text">
              <span>完结</span>
              <span>共14课时f</span>
            </div>
          </div>
          <div class="c-name text-row-1">
            react 课程名字 react 课程名字react 课程名字react 课程名字
          </div>
          <div class="b-bar">
            <span>react</span>
            <span>共 <b>1988</b>人学习 </span>
          </div>
        </a>
      </div>

      <div class="course-list" hidden>
        <a href="javascript:;" class="item click year" title="课程名字">
          <div class="img-wrap">
            <img
              src="http://photo.tuituisoft.com/portal/20210312/604ad05ab335c.jpg"
              alt="课程名字"
            />
            <div class="tips year-tips">年会员</div>
            <div class="tips free-tips">免费</div>
            <div class="tips camp-tips">
              <i class="icon-qizi-brown iconfont"></i> 训练营
            </div>
            <div class="b-text">
              <span>完结</span>
              <span>共14课时f</span>
            </div>
          </div>
          <div class="c-name text-row-1">
            2222react 课程名字 react 课程名字react 课程名字react 课程名字
          </div>
          <div class="b-bar">
            <span>react</span>
            <span>共 <b>1988</b>人学习 </span>
          </div>
        </a>
        <a href="javascript:;" class="item click free" title="课程名字">
          <div class="img-wrap">
            <img
              src="http://photo.tuituisoft.com/portal/20210312/604ad05ab335c.jpg"
              alt="课程名字"
            />
            <div class="tips year-tips">年会员</div>
            <div class="tips free-tips">免费</div>
            <div class="tips camp-tips">
              <i class="icon-qizi-brown iconfont"></i> 训练营
            </div>
            <div class="b-text">
              <span>完结</span>
              <span>共14课时f</span>
            </div>
          </div>
          <div class="c-name text-row-1">
            react 课程名字 react 课程名字react 课程名字react 课程名字
          </div>
          <div class="b-bar">
            <span>react</span>
            <span>共 <b>1988</b>人学习 </span>
          </div>
        </a>
        <a href="javascript:;" class="item click camp" title="课程名字">
          <div class="img-wrap">
            <img
              src="http://photo.tuituisoft.com/portal/20210312/604ad05ab335c.jpg"
              alt="课程名字"
            />
            <div class="tips year-tips">年会员</div>
            <div class="tips free-tips">免费</div>
            <div class="tips camp-tips">
              <i class="icon-qizi-brown iconfont"></i> 训练营
            </div>
            <div class="b-text">
              <span>完结</span>
              <span>共14课时f</span>
            </div>
          </div>
          <div class="c-name text-row-1">
            react 课程名字 react 课程名字react 课程名字react 课程名字
          </div>
          <div class="b-bar">
            <span>react</span>
            <span>共 <b>1988</b>人学习 </span>
          </div>
        </a>
      </div>
    </div>

    <script>
      let wrap1 = document.querySelector(".type-wrap-1");
      let showMore = false;
      let rList1 = wrap1.querySelector(".r-list");

      /*   let content = "";
      for (let i = 0; i < 100; i++) {
        content += `<li class="underline">
                      <a href="javascript:;"> list${i}</a>
                    </li>`;
      }
      rList1.innerHTML = content; */
      let showmoreBtn = wrap1.querySelector(".showmoreBtn");
      showmoreBtn &&
        showmoreBtn.addEventListener("click", () => {
          if (!showMore) {
            wrap1.classList.add("showMore");
            showmoreBtn.innerHTML = ` 收起 <i class="iconfont icon-xiala2"></i>`;
          } else {
            showmoreBtn.innerHTML = ` 展开 <i class="iconfont icon-xiala2"></i>`;
            wrap1.classList.remove("showMore");
          }
          showMore = !showMore;
        });

      let typeBox = document.querySelectorAll(".type-box li");
      let typeContentList = document.querySelectorAll('.course-list')

      for (let i = 0; i < typeBox.length; i++) {
        typeBox[i].addEventListener("click", () => {
          for (let j = 0; j < typeBox.length; j++) {
            typeBox[j].classList.remove('active')
            typeContentList[j].style.display = 'none'
          }
          typeBox[i].classList.add('active')
          typeContentList[i].style.display = 'flex'

        });
      }
    </script>
  </body>
</html>
